<!-- 工单池 -->
<template>
  <q-page class="q-px-xs">
    <!-- 查询操作 -->
    <q-toolbar>
      <table-filter :model-value="query" @change="handleQuery" />
      <q-space />
      <q-btn icon="plus" color="primary" @click="handleAdd()">新增</q-btn>
      <q-btn icon="delete" color="error" :disable="!hasSelected" class="q-mx-sm" @click="handleDelete()">删除</q-btn>
      <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
    </q-toolbar>

    <!-- 数据表格 -->
    <q-table :columns="columns" selection="multiple" v-bind="tableOptions">
      <template #body-cell-action="props">
        <q-td :props="props">
          <q-btn round flat icon="edit" color="primary" @click="handleEdit(props.row.orderId)" />
          <q-btn round flat icon="delete" color="error" @click="handleDelete(props.row.orderId)" />
        </q-td>
      </template>
    </q-table>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <workorder-form :id="orderId" :title="title" @close="closeDialog" @after-save="handleQuery" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { usePageQuery, useTable, useCrudList, useFormDialog } from 'src/composables';

  import crudApi from 'src/api/workorder/workorder';
  import WorkOrderForm from './WorkOrderForm.vue';

  // 定义组件名
  defineOptions({ name: 'WorkOrder' });

  // 查询条件
  const query = usePageQuery();

  // 表格数据
  const { tc, formatter } = useTable();
  const { tableOptions, handleQuery, hasSelected, handleDelete, exportLoading, handleExport } = useCrudList(crudApi, query, 'orderId');
  const columns = [
    tc('orderNo', '工单编号', 150),
    tc('orderType', '工单类型', 150),
    tc('description', '工单描述', 150),
    tc('orderStatus', '工单状态', 150),
    tc('submitPerson', '提交人', 150),
    tc('submitTel', '提交人电话', 150),
    tc('submitAreaId', '小区ID', 150),
    tc('submitRoomId', '提交人房号', 150),
    tc('submitAddr', '提交人地址', 150),
    tc('submitTime', '提交时间', 150),
    tc('rateStars', '评价星级', 150),
    tc('rateContent', '评价内容', 150),
    tc('handleUser', '工单处理人账号', 150),
    tc('handleUserName', '工单处理人姓名', 150),
    tc('handleResult', '处理结果', 150),
    tc('createdBy', '创建人', 150),
    tc('createdTime', '创建时间', 150, { align: 'center', format: formatter.date }),
    tc('updatedBy', '修改人', 150),
    tc('updatedTime', '修改时间', 150, { align: 'center', format: formatter.date }),
  
    tc('action', '操作', 0, { style: 'min-width:120px' }),
  ];
  onMounted(handleQuery);

  // 表单窗口
  const { dialog, title, id: orderId, handleAdd, handleEdit, closeDialog } = useFormDialog('工单池');
</script>

<style lang="scss" scoped></style>
